{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Tooltip Viewport Example for Bootstrap{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/tooltip-viewport.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/applicationbootstrap/js/examples/tooltip-viewport.js') }}" type="text/javascript"></script>
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container tooltip-viewport">
    
	    <button class="btn btn-default pull-right tooltip-bottom" title="This should be shifted to the left">Shift Left</button>
	    <button class="btn btn-default tooltip-bottom" title="This should be shifted to the right">Shift Right</button>
	    <button class="btn btn-default tooltip-right" title="This should be shifted down">Shift Down</button>
	
	    <button class="btn btn-default tooltip-right btn-bottom" title="This should be shifted up">Shift Up</button>
		
		<div class="row">
			<div class="col-md-6 col-md-offset-3">
	            <div class="container-viewport">
			      <button class="btn btn-default tooltip-viewport-bottom" title="This should be shifted to the left">Shift Left</button>
			      <button class="btn btn-default tooltip-viewport-right" title="This should be shifted down">Shift Down</button>
			
			      <button class="btn btn-default pull-right tooltip-viewport-bottom" title="This should be shifted to the right">Shift Right</button>
			
			      <button class="btn btn-default tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button>
	            </div>
			</div>
		</div>
		

    </div> <!-- /container -->
{% endblock %}